<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>东哥摇号</title>
    <script>    fetch('./stock_codes.json') // 假设你的JSON文件名为data.json并且和HTML文件在同一目录下
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Local JSON data:', data);
        })
        .catch(error => console.error('Error fetching local data:', error));
    </script>
    <style>        body, html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
    }

    .container {
        text-align: center;
    }

    button {
        font-size: 1.5em;
        padding: 10px 20px;
    }

    #displayArea {
        font-size: 2em;
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 10px;
        background-color: white;
    }

    </style>
</head>
<body>
<div class="container">
    <button id="shuffleButton">东哥摇号</button>
    <div id="displayArea">等待摇号...</div>
</div>

<script>
    // 其他代码保持不变...

    // 定义常量
    const INTERVAL_DELAY = 50; // 更新间隔
    const SHUFFLE_DURATION = 3000; // 摇号持续时间

    // 获取DOM元素
    let displayArea = document.getElementById('displayArea');
    let shuffleButton = document.getElementById('shuffleButton');

    // 禁用按钮并添加加载指示
    function disableButtonAndShowLoading() {
        shuffleButton.disabled = true;
        shuffleButton.innerText = '加载中...';
    }

    // 恢复按钮状态
    function enableButton() {
        shuffleButton.disabled = false;
        shuffleButton.innerText = '东哥摇号';
    }

    // 清除定时器
    let timerId = null; // 用于存储定时器ID
    function clearTimer() {
        if (timerId) {
            clearInterval(timerId);
            timerId = null;
        }
    }

    fetch('./stock_codes.json')
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Local JSON data:', data);
            // 在这里处理数据
            let numbers = data.code;

            // 在数据加载完成后初始化摇号按钮
            shuffleButton.addEventListener('click', function () {
                try {
                    disableButtonAndShowLoading();

                    clearTimer(); // 清除任何现有的定时器

                    let randomNumbers = numbers.slice(); // 复制数组以避免修改原始数据

                    timerId = setInterval(() => {
                        let randomIndex = Math.floor(Math.random() * randomNumbers.length);
                        if (randomNumbers.length > 0) {
                            displayArea.textContent = randomNumbers.splice(randomIndex, 1)[0]; // 从数组中移除已选择的数字
                        }
                    }, INTERVAL_DELAY);

                    setTimeout(() => {
                        clearTimer();
                        let finalIndex = Math.floor(Math.random() * randomNumbers.length);
                        displayArea.textContent = randomNumbers[finalIndex] || '摇号结束'; // 如果没有剩余数字，显示“摇号结束”
                        enableButton();
                    }, SHUFFLE_DURATION);
                } catch (error) {
                    console.error('Error fetching numbers:', error);
                    enableButton(); // 发生错误时，恢复按钮状态
                }
            });
        })
        .catch(error => console.error('Error fetching local data:', error));
</script>

</body>
</html>
